<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MapLibre GL TDT 地图应用</title>
  <link href='/libs/maplibre-gl/dist/maplibre-gl.css' rel='stylesheet' />
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" type="image/svg+xml" href="favicon.svg">
  <link rel="alternate icon" href="favicon.ico">
</head>
<body>
  <div class="container">
    <header class="header">
      <h1>MapLibre GL 天地图应用</h1>
      <div class="controls">
        <div class="map-type-selector">
          <label for="map-type">地图类型：</label>
          <select id="map-type">
            <option value="vector">矢量地图</option>
            <option value="image">卫星影像</option>
            <option value="terrain">地形地图</option>
          </select>
          <label for="show-labels" class="checkbox-label">
            <input type="checkbox" id="show-labels" checked>
            标注
          </label>
          <div class="zoom-display">
            Z: <span id="current-zoom">0</span>
          </div>
          <label for="show-tile-coords" class="checkbox-label">
            <input type="checkbox" id="show-tile-coords">
            显示X/Y标号
          </label>
        </div>
        <div class="map-mode-selector">
          <label for="map-mode">地图模式：</label>
          <select id="map-mode">
            <option value="offline">离线模式</option>
            <option value="online">在线模式</option>
          </select>
        </div>
        <div id="mode-status">当前模式: <span id="current-mode">离线模式</span></div>
        <button id="toggle-sidebar" class="btn-control">
          离线地图管理
        </button>
      </div>
    </header>
    
    <div id="map" class="map-container"></div>
    
    <!-- 模式说明（移至离线地图管理面板中） -->
    
    <div class="sidebar">
      <div class="panel">
        <h3>离线地图管理</h3>
        <p class="mode-description">
            离线模式: 只使用本地缓存瓦片，不存在则显示空白<br>
            在线模式: 优先使用缓存，不存在则从天地图服务器获取
        </p>
        <div class="offline-actions">
          <button id="save-current-view" class="btn">保存当前视图</button>
          <div class="zoom-range">
            <label for="min-zoom">最小缩放：</label>
            <input type="number" id="min-zoom" min="1" max="18" value="10">
            <label for="max-zoom">最大缩放：</label>
            <input type="number" id="max-zoom" min="1" max="18" value="15">
          </div>
        </div>
        
        <div class="offline-status" id="download-status">
          <div class="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
          </div>
          <div class="status-text" id="status-text">就绪</div>
        </div>
        
        <div class="saved-maps">
          <h4>已保存的地图</h4>
          <ul id="saved-maps-list"></ul>
        </div>
      </div>
    </div>
    
    <div class="loading-overlay" id="loading-overlay">
      <div class="loading-spinner"></div>
      <div class="loading-text">加载中...</div>
    </div>
  </div>
  
  <script src='/libs/maplibre-gl/dist/maplibre-gl.js'></script>
  <script src="map.js"></script>
  <script>
        // 模式状态更新功能
        window.updateModeDisplay = function(mode) {
            document.getElementById('current-mode').textContent = 
                mode === 'online' ? '在线模式' : '离线模式';
        };
        
        // 初始获取模式状态
        document.addEventListener('DOMContentLoaded', async () => {
            try {
                const response = await fetch('/api/map/get-mode');
                if (response.ok) {
                    const data = await response.json();
                    updateModeDisplay(data.mode);
                }
            } catch (error) {
                console.error('获取模式状态失败:', error);
            }
        });
    </script>
</body>
</html>